# 笔记

## 简单的重置浏览器默认行为

```css
/* 重置浏览器默认行为 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 利用【继承】，在body设置字体相关内容，会比通过*设置更加高效 */
body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
}
```

## 单位 `vh`

```css
.header {
  height: 95vh; /* 视口(viewport)的95% */
}
```

## 线性渐变

```css
background-image: linear-gradient(to right bottom, #7ed56f, #28b485);
```

### 组合

```css
background-image: linear-gradient(to right bottom, #7ed56f, #28b485),
  url("../img/hero.jpg");
```

### 使用透明度，显示图片

```css
background-image: linear-gradient(
    to right bottom,
    rgba(126, 213, 111, 0.8) /* #7ed56f 透明度80%，通过vs取色板调整 */,
    rgba(40, 180, 133, 0.8) /* #28b485 透明度80% */
  ), url("../img/hero.jpg");
```

## 裁切

```css
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

/* 等边三角形 */
/* clip-path: polygon(50% 0, 100% 100%, 0 100%);  */
```

实用工具：[https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)

## 垂直居中 - `absolute` 方案

```css
.text-box {
  position: absolute;
  /* top/left：在父容器的位置 */
  top: 50%;
  left: 50%;
  /* translate：移动自己本身的位置 */
  transform: translate(-50%, -50%);
}
```

## CSS 动画之 `animation` 和 `@keyframes`

### `@keyframes`

> 为了性能，通常在动画里只改变 `opacity` 和 `transform` 属性

```css
@keyframes 名字 {
  /* 起始 */
  0% {
  }

  /* 中间状态，若干 */
  10% {
  }
  50% {
  }
  77% {
  }
  80% {
  }
  /* ... */

  /* 结束 */
  100% {
  }
}
```

### `animation`

```css
/* 动画名字 */
animation-name: moveInLeft;
/* 持续时长 */
animation-duration: 1s;
/* 延迟：等待多久之后才执行动画 */
animation-delay: 3s;
/* 动画执行次数 */
animation-iteration-count: 3;
/* 动画计时方式 */
animation-timing-function: ease-out;
```

## 解决子元素动画上下抖动

在父元素加上：

```css
/* 解决子元素动画上下抖动 */
backface-visibility: hidden;
```

## CSS 动画之【过渡】

配合 `transition` 和 `transform`

- `transition` 在初始状态开启
- `transform` 在不同状态定义

```css
.btn {
  transition: all 0.2s;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn:active {
  transform: translateY(-1px);
}
```

## 单位

- 每个属性都有初始值，用于该属性没有声明或没有继承的时候
- 浏览器为每个页面都设置了一个*根字体大小（root `font-size`）*，通常是`16px`
- 百分比和相对值最终都会转换成像素
- 百分比的 `font-size` 值，将通过它*父元素*的 `font-size` 来计算
- 百分比的长度值，将通过它*父元素*的 `with` 来计算
- `em`的 `font-size`值，将通过它*父元素*的 `font-size` 来计算
- `em` 的长度值，将通过*元素自己*的 `font-size` 来计算
- `rem` 永远通过*根字体大小*来计算
- `vh` 和 `vm` 将简单地使用 _视口(viewport)_ 的`height`和`width`百分比值

## 基本的响应式设计原则

### 流式布局

- 让网页适应当前视口宽度(甚至高度)
- 需要适配视口的元素(通常用于布局)，使用 `%`、`vh`、`vw` 等单位替换 `px`
- 使用 `max-width` 替代 `width`

### 响应式单位

- 对于大多数长度，使用 `rem` 替换 `px`
- 使自动缩小（或放大）整个布局变得容易

### 弹性式图像

- 默认情况下，图片不会在切换视口时进行自动缩放，需要手动解决
- 图像的尺寸始终使用 `%` ，同时使用 `max-width` 属性。

### 媒体查询

- 在某些视口宽度上更改 CSS 样式(称为断点)

## 文字渐变

```css
/* 1. 设置背景渐变 */
background-image: linear-gradient(
  to right,
  $color-primay-light,
  $color-primay-dark
);
/* 2. 设置背景按文本裁切 */
background-clip: text;
/* 3. 设置文本颜色为透明 */
color: transparent;
/* 可选，为了让文字容器不占满整个宽度 */
display: inline-block;
```

## 翻转卡片

```scss
.card {
  // 定义透视
  perspective: 150rem;
  -moz-perspective: 150rem;

  position: relative;
  height: 50rem;

  &__side {
    height: 50rem;
    transition: all 0.8s ease;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15);

    &--front {
      background-color: $color-white;
    }
    &--back {
      // 垂直翻转180度
      transform: rotateY(180deg);
    }
  }

  &:hover &__side {
    &--front {
      transform: rotateY(-180deg);
    }
    &--back {
      transform: rotateY(0);
    }
  }
}
```

关键点：

- 父容器定义透视：`perspective`
- 子容器定义翻转：`rotateY`
- 子容器定义绝对定位
- 为了撑满容器，父容器和子容器定义相同的高度；子容器定义完全宽度
- 为了避免同时显示正反两面，加上 `backface-visibility: hidden`

## 将行内元素的每个折行视为单独的一行

```css
/* 将行内元素的每个折行视为单独的一行*/
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
```

## 背景视频

- html:

```html
<div class="bg-video">
  <video class="bg-video__content" autoplay loop muted>
    <source src="/img/video.mp4" type="video/mp4" />
    <source src="/img/video.webm" type="video/webm" />
    Your browser is not suppoerted!
  </video>
</div>
```

- css:

```scss
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.15;
  overflow: hidden;

  &__content {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
```

- 免费背景视频

https://coverr.co

## 自定义过渡函数

- https://easings.net

- https://cubic-bezier.com

```css
transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1);
```

## 使用锚点实现弹窗

- 链接

```html
<a href="#popup">弹窗</a>
```

- 元素

```html
<div id="popup"></div>
```

- `:target` 伪类 - 作为锚点目标时触发

```css
#popup {
  /* 默认不显示 */
  opacity: 0;
  visibility: hidden;
}
#popup:target {
  /* 作为锚点目标时显示 */
  opacity: 1;
  visibility: visible;
}
```

## SVG 图标

https://icomoon.io

## flex 中，子元素占据所有可用空间

```css
.parent {
  display: flex;
}
```

### 占据并撑满可用空间

```css
.child {
  flex: 1;
}
```

### 占据但不撑满可用空间

```css
.child {
  margin-right: auto;
}
```

## 使用 `mask` 替换背景图片

```scss
&__item::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: 0.7rem;
  //旧浏览器
  // background-image: url("/img/chevron-thin-right.svg");
  // background-size: cover;
  // background-repeat: no-repeat;

  // 新浏览器
  background-color: var(--color-primary);
  mask-image: url(/img/chevron-thin-right.svg);
  mask-size: cover;
  -webkit-mask-image: url(/img/chevron-thin-right.svg);
  -webkit-mask-size: cover;
}
```

## 对齐

| 属性名            | 布局       | 元素 | 说明                               |
| ----------------- | ---------- | ---- | ---------------------------------- |
| `justify-content` | flex       | 父   | 子元素水平对齐                     |
| `justify-items`   | grid       | 父   | 子元素水平对齐                     |
| `align-items`     | flex, grid | 父   | 子元素垂直对齐                     |
| `align-self`      | flex, grid | 子   | 自身垂直对齐，覆盖 `align-items`   |
| `justify-self`    | grid       | 子   | 自身水平对齐，覆盖 `justify-items` |

## 垂直居中之 flex

```css
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
```

## 垂直居中之 grid

```css
display: grid;
justify-items: start;
align-content: center;
```
